<template>
	<div class="edit-panel">
		<div class="edit-panel-header">
			<span>对象设置</span>
<!-- 			<div>
				<el-button type="primary" :icon="FolderAdd" style="border: none;" @click="addFolder" title="添加图层"/>
			</div> -->
		</div>
		<div class="edit-panel-body">
			<el-table
			  :data="tableData"
			  style="width: 100%; margin-bottom: 20px;height: 100%;"
			  row-key="id"
			  default-expand-all
			  :show-header="false"
			  stripe
			  :highlight-current-row="true"
			  @row-click="onRowClick"
			>
			  <el-table-column prop="label" label="label">
				  <template #default="scope">
					  <div class="node-row">
						  <div class="icon" v-show="scope.row.type=='Layer'">
							  <img  src="../../../../../assets/icons/layers.svg"/>
						  </div>
						  <div class="icon" v-show="scope.row.type=='Actor'">
						  		 <img  src="../../../../../assets/icons/model.svg"/>
						  </div>
						  <div class="icon-point" v-show="scope.row.type=='Actor'">
						  		 <img  src="../../../../../assets/icons/position.svg"/>
						  </div>
						  <div class="icon" v-show="scope.row.type=='Actor'">
						  		 <img  src="../../../../../assets/icons/polygon.svg"/>
						  </div>
						  <div class="icon-line" v-show="scope.row.type=='Actor'">
						  		 <img  src="../../../../../assets/icons/line.svg"/>
						  </div>
						  <div class="title">
							  <input type="text" v-model="scope.row.label" v-show="scope.row.isEdit"  @keydown="OnStopRowEdit(scope.row)" />
							  <span  v-show="!scope.row.isEdit">{{scope.row.label}}</span>
						  </div>
						  <div>
							  <ul>
								  <li v-show="scope.row.type!='Layer'">
									  <img  src="../../../../../assets/icons/nowposition.svg"/>
								  </li>
								  <li @click="openContextmenu(scope.row)">
									  <img  src="../../../../../assets/icons/more.svg"/>
								  </li>
								  <li v-show="scope.row.isShow=='0'">
									  <img  src="../../../../../assets/icons/eye.svg"/>
								  </li>
								  <li v-show="scope.row.isShow=='-1'">
									  <img  src="../../../../../assets/icons/eye-close.svg"/>
								  </li>
							  </ul>
						  </div>
					  </div>
				  </template>
			  </el-table-column>
			</el-table>
		</div>
		
		
		<div class="node-menu" v-show="isOpenMenu"  :style="{ left: position.left + 'px', top: position.top + 'px' }">
			<ul>
				<li @click="renameNode">重命名</li>
				<li @click="deleteNode">删除</li>
				<li @click="settingLocaltion">调整位置</li>
				<li v-show="curNode!=null && curNode.type!='Layer'  "  @click="settingNodeSytle">样式设置</li>
			</ul>
		</div>
		
		<NodeRename ref="nodeRenameRef" />
		<LayerTree ref="layerTreeRef" @onClosed="onLayerTreeClosed"></LayerTree>
		
	</div>
</template>

<script lang="ts" setup>
	import {
	  FolderAdd,InfoFilled
	} from '@element-plus/icons-vue'
	
	import NodeRename from "./nodeRename/NodeRename.vue"
	import LayerTree from "./layerTree/LayerTree.vue"
	
	
	import { ElMessage, ElMessageBox } from 'element-plus'

	import { LoadTree,updateLayer,updateActor,deleteLayer,deleteActor,addLayer } from "@/api/scene";
	import {ref } from 'vue'
	const nodeRenameRef=ref(null);
	const tableData=ref([]);
	const layerTreeRef=ref();
	
	
	const addFolder=()=>{
		addLayer({
		})
		.then((res) => {
			if(res.code==200){
				ElMessage.success(res.message || '成功.');
				GetTree();
			}else{
				ElMessage.error(res.message || '系统出错');
			}
		})
		.catch((e) => {
		})
		.finally(() => {
			curNode=null;
		});
	}
	
	const GetTree=()=>{
		LoadTree({
			pid:"-1",
			sceneid:"",
			getActor:true
		})
		.then((res) => {
			if(res.code==200){
				tableData.value=res.result
			}else{
				ElMessage.error(res.message || '系统出错');
			}
		})
		.catch((e) => {
		})
		.finally(() => {
		});
	}
	
	const isOpenMenu = ref(false)
	const position = ref({
		left:0,
		top:0
	})
	let curNode;
	
	const openContextmenu=(node)=>{
		var event = window.event || arguments.callee.caller.arguments[0]
		isOpenMenu.value = true
		position.value.top = event.pageY-25
		position.value.left = event.pageX -112
		curNode=node
	}
	
	const closeContextmenu=(e,node)=>{
		  isOpenMenu.value = false
		  curNode=null;
	}
	
	const copyNode=(e,node)=>{
		  isOpenMenu.value = false
		  curNode=null;
	}
	
	const renameNode=(e,node)=>{
		  isOpenMenu.value = false
		  curNode.isEdit=true
	}
	
	const OnStopRowEdit=(node)=>{
		var e = window.event || arguments.callee.caller.arguments[0]
		if(e.keyCode == 13) {
			node.isEdit=false;
			if(node.type=='Actor'){
				updateActor({
					"id":node.id,
					"name":node.label,
					"type":node.type,
				})
				.then((res) => {
					if(res.code==200){
						ElMessage.success(res.message || '成功.');
					}else{
						ElMessage.error(res.message || '系统出错');
					}
				})
				.catch((e) => {
				})
				.finally(() => {
				});
			}else{
				updateLayer({
					"id":node.id,
					"label":node.label,
					"type":node.type,
				})
				.then((res) => {
					if(res.code==200){
						ElMessage.success(res.message || '成功.');
					}else{
						ElMessage.error(res.message || '系统出错');
					}
				})
				.catch((e) => {
				})
				.finally(() => {
				});
			}
			return false;
		}
	}
	
	
	const deleteNode=(e,node)=>{
		  isOpenMenu.value = false
		  open(curNode);
	}
	
	const open = (node) => {
		let message="";
		if(node.type=="Layer"){
			message="确认删除["+node.label+"]图层以及相关的所有数据吗?";
		}else{
			message="确认删除["+node.label+"]吗?"
		}
		  ElMessageBox.confirm(
			message,
			'警告',
			{
			  confirmButtonText: '确认',
			  cancelButtonText: '取消',
			  type: 'warning',
			}
		  )
	    .then(() => {
			if(node.type=='Actor'){
				deleteActor({
					"id":node.id,
					"name":node.label,
					"type":node.type,
				})
				.then((res) => {
					if(res.code==200){
						ElMessage.success(res.message || '成功.');
						GetTree();
					}else{
						ElMessage.error(res.message || '系统出错');
					}
				})
				.catch((e) => {
				})
				.finally(() => {
					curNode=null;
				});
			}else{
				deleteLayer({
					"id":node.id,
					"label":node.label,
					"type":node.type,
				})
				.then((res) => {
					if(res.code==200){
						ElMessage.success(res.message || '成功.');
						GetTree();
					}else{
						ElMessage.error(res.message || '系统出错');
					}
				})
				.catch((e) => {
				})
				.finally(() => {
					curNode=null;
				});
			}
	    })
	    .catch(() => {
	      ElMessage({
	        type: 'info',
	        message: '取消删除.',
	      })
		  curNode=null;
	    })
		curNode=null;
	}
	
	const settingNodeSytle=(e,node)=>{
		  isOpenMenu.value = false
		  curNode=null;
	}
	
	const settingLocaltion=()=>{
		isOpenMenu.value = false
		layerTreeRef.value.show(curNode);
		 curNode=null;
	}
	
	const onLayerTreeClosed=(e)=>{
		GetTree();
	}
	
	
	const emits = defineEmits(['onRowClick'])
	const onRowClick=(row, column, event)=>{
		emits('onRowClick', row, column, event)
	}
	
	onMounted(() => {
		GetTree();
	});

</script>

<style scoped>


/deep/ .el-table {
    background-color: transparent;
    font-size: 12px;
    color: #ccc;
}

/deep/.el-table tr {
    background-color:transparent;
}

/deep/ .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf {
    border-bottom:transparent;
	border-left: 2px solid transparent; 
	cursor: pointer;
}

/deep/ .el-table__expand-icon {
    color: #ccc;
}

/deep/ .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
    background:  #36373a;
}

/deep/.el-table__body tr.current-row>td.el-table__cell {
	background-color: #174a7d!important;
	border-left: 2px solid #0080ff; 
}


/deep/.el-table__body tr > td:hover {
	background-color: #174a7d!important;
	border-left: 2px solid #0080ff; 
}

/deep/ .el-table__inner-wrapper::before {
	background-color: transparent !important;
}

/deep/.el-table--default .el-table__cell {
    padding: 5px 0;
}

/deep/.el-table--default .cell {
	padding: 0 5px; 
	display: flex;
}

/deep/.el-table__expand-icon {
    margin-top: 5px;
	margin-right: 5px;
}
/deep/.el-table__expand-icon {
    margin-right: 4px;
}

.node-row{
	position: initial;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: row;
	flex-direction: row;
	width: 100%;
	>.icon{
		margin-top: -1px;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		width: 15px;
		>img{
			width: 0.9375rem;
			height: 0.9375rem;
		}
	}
	>.icon-line{
		margin-top: -1px;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		width: 10px;
		>img{
			width: 10px;
			height:10px;
		}
	}
	>.icon-point{
		margin-top: -1px;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		width: 16px;
		>img{
			width: 16px;
			height:16px;
		}
	}
	>.title{
		flex: 1;
		width: 100%;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		margin-right: 0.3125rem;
		width: 100%;
		margin-left: 0.3125rem;
		>input[type=text]{
			background: #1f2632;
			border: 1px solid #4d505e;
			border-radius: 0;
			outline-style: none ;
			caret-color:#0080ff;
			color: #ccc;
		}
		>input[type=text]:focus {
			border: px solid #0080ff;
		}
		
	}
 	>div{
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		width: 66px;
		>ul{
			>li{
				list-style: none;
				float: left;
				cursor: pointer;
				color: #ccc;
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				-webkit-box-pack: justify;
				-ms-flex-pack: justify;
				justify-content: space-between;
				-webkit-box-align: center;
				-ms-flex-align: center;
				align-items: center;
				margin-left: 5px;
				>img{
					width: 0.9375rem;
					height: 0.9375rem;
				}
			}
		}
	} 
}

.edit-panel{
		flex:1;
		background-color: #2b2c2f;
		height: 100%;
		display: -webkit-flex;
		display: flex;
		-webkit-flex-direction: column;
		flex-direction: column;
		>.edit-panel-header{
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-pack: justify;
			-ms-flex-pack: justify;
			justify-content: space-between;
			-webkit-box-align: center;
			-ms-flex-align: center;
			align-items: center;
			width: 100%;
			height: 34px;
			background-color: #36373a;
			border-bottom: 1px solid #18181b;
			border-top: 1px solid #515664;
			color: #ccc;
			font-size: 14px;
			>span{
				border-left-width: 3px!important;
				padding-left: 8px!important;
				height: 16px;
				line-height: 17px;
				font-size: 13px;
				color: #ccc;
				-webkit-box-sizing: border-box;
				box-sizing: border-box;
				white-space: nowrap;
				border-left: 2px solid #0080ff;
				margin-left: 8px;
				padding-left: 3px;
			}
			>div{
				float: right;
				margin-top: -1px;
				>button{
				   width: 1.4375rem;
				   height: 1.875rem;
				   margin-right: 0.3125rem;
				   background: transparent;
				   color: #ccc;
				}
			}
		}
 		>.edit-panel-body{
			flex: 1;
			height: 100%;
		} 
	}

	.node-menu{
		position: absolute;
		top: 0;
		left: 0;
		z-index: 2114;
		width: 120px;
		
		margin-top: 0!important;
		padding: 0;
		background: #2b2c2f;
		border: 1px solid #201f1f;
		color: #ccc;
		
		
		>ul{
			margin-top: 0!important;
			padding: 0;
			border: 1px solid #201f1f;
			color: #ccc;
			font-size: 0.8125rem;
			>li{
				list-style: none;
				color: #ccc;
				line-height: 30px;
				padding-left: 10px;
				padding-right: 10px;
				border-left: 2px solid #2b2c2f;
				cursor: pointer;
			}
		}
	}

</style>
